<template>
    <div>分页   <span v-for="item in pageNumber" :key="item" class="box" @click="selectPage(item)" :class="{active:page===item}">{{item}}</span></div>
</template>
<script>
export default {
    props:{
        recordSize:{
            type:Number,
            default:1,
        },
        pageSize:{
            type:Number,
            default:10
        }
    },

    data(){
        return {
          pageNumber:1,
          page:1
        }
    },

    created(){
        this.refreshPageNumber()
    },
    methods:{
        selectPage(page){
           this.page=page;
           this.$emit("onPageChange",page);
        },
        refreshPageNumber(){
         this.pageNumber=Math.ceil(this.recordSize/this.pageSize);
         console.log('this.pageNumber',this.pageNumber);
        }
    }
}
</script>

<style scoped>
.box {
  display: inline-block;
  margin-right: 10px;
  border: 1px solid gray;
  padding: 4px;
}

.active {
  background: pink;
}
</style>